<!DOCTYPE html>
<style>
    #draggable {
        position: relative;
        width: 100px;
        height: 100px;
        -webkit-user-drag: element;
    }

    #descendant-painting-sibling {
        position: relative;
        width: 100px;
        height: 100px;
        background: green;
        -webkit-user-drag: none;
        transform: translateX(50px);
    }
</style>
<div id="draggable">
  <div id="descendant-painting-sibling"></div>
</div>
This test passes if the generated drag image is a 100x100 green box, positioned
*with* the transform.
<script>
    function drag() {
        testRunner.dumpDragImage();

        var image = document.getElementById('draggable');
        var startX = image.offsetLeft + image.offsetWidth / 2;
        var startY = image.offsetTop + image.offsetHeight / 2;
        var positionX = startX + image.offsetWidth;
        var positionY = startY + image.offsetHeight;

        eventSender.dragMode = true;
        eventSender.mouseMoveTo(startX, startY);
        eventSender.mouseDown();
        eventSender.mouseMoveTo(positionX, positionY);
        eventSender.mouseUp();
    }

    if (!window.testRunner || !window.eventSender) {
        document.write("This test does not work in manual mode.");
    } else {
        window.onload = drag;
    }
</script>
